<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="description" content="这是一个描述">
	<meta name="author" content="maogege">
	<meta name="keywords" content="maogege,测试">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>视觉差demo</title>
	<link rel="stylesheet" type="text/css" href="css/seechange.css">
</head>
<body>
<div class="m-container">

    <a onclick="qqtest()" href="javascript:;">测试qq跳转</a>
    <a onclick="qqtest2()" href="javascript:;">测试qq跳转2</a>
    <br>
    <br>
    <br>
    <a href="index2.html" target="_blank" rel="noopener noreferrer">测试f2-canvas</a>
	<a href="javascript:;" id="copy">ceshicopy</a>
	<video controls src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" style="width: 200px;height: 270px;position: absolute;z-index: 99999999;" ></video>
	<video controls src="title.mp4" style="width: 200px;height: 270px;position: absolute;z-index: 99999999;" ></video>
	<input id="takepicture" type="file" accept="image/*" capture="camera">
	<input type="file" accept="image/*" multiple/>
	<img src="" id="imgid">
	<div class="banner">
		<div class="banner-bg bg1"></div>
		<div class="banner-bg bg2"></div>
		<div class="banner-bg bg3"></div>
		<div class="banner-bg bg4"></div>
		<div class="banner-bg bg5"></div>
	</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
    function qqtest(){
        console.log(123)
        document.location.href = 'mqqapi://forward/url?url_prefix=aHR0cHM6Ly9tLnRnbC5xcS5jb20vIy9hY3Rpdml0eS9hdXRvY2hlc3M=&souce=oicqzone.com&version=1&src_type=web'
    }
    function qqtest2(){
        console.log(456)
        document.location.href = 'wtloginmqq://ptlogin/qlogin?p=https%3A%2F%2Fssl.ptlogin2.qq.com%2Fjump%3Fu1%3Dhttp%253A%252F%252Fconnect.qq.com%26pt_report%3D1%26daid%3D383%26style%3D35%26pt_ua%3D153251BD49E90DB2C799F5B9531BF440%26pt_browser%3Dothers%26pt_3rd_aid%3D101492244%26pt_openlogin_data%3Dappid%253D716027609%2526pt_3rd_aid%253D101492244%2526daid%253D383%2526pt_skey_valid%253D1%2526style%253D35%2526s_url%253Dhttp%25253A%25252F%25252Fconnect.qq.com%2526refer_cgi%253Dauthorize%2526which%253D%2526response_type%253Dcode%2526client_id%253D101492244%2526redirect_uri%253Dhttps%253A%252F%252Fapi.tgl.qq.com%252Finner%252Fqq%252Flogin%253Fstate%253D9af3162c780e3abdd2143e5e6223f6d8%2526pt_flex%253D1'
    }
	function copy(message) {
        var input = document.createElement("input");
            input.value = message;
			input.readOnly = true;
            document.body.appendChild(input);
            input.select();
            input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
            document.body.removeChild(input);
           alert("复制成功", "text");
}
$("#copy").click(function(){

	copy(location.href);
})
	setTimeout(function(){
		$("#imgid").attr('src','https://dummyimage.com/1920x347');
	},2000);
	// $(".banner").mousemove(function(e){
	// 	var mx = e.clientX - $(this).offset().left;
	// 	var my = e.clientY - $(this).offset().top;
	// 	var parentWidth = $(this).width();
	// 	var parentHeight = $(this).height();
	// 	var xx = mx-parentWidth/2;
	// 	var yy = my-parentHeight/2;
	// 	change($(".bg1"),.01,.01,xx,yy);
	// 	change($(".bg2"),.02,.02,xx,yy);
	// 	change($(".bg3"),.03,.03,xx,yy);
	// 	change($(".bg4"),.04,.04,xx,yy);
	// 	change($(".bg5"),.05,.05,xx,yy);
	// })
	// function change(el,initx,inity,xx,yy){
	// 	el.css({
	// 		transform: `translate3d(${-initx*xx}px,${-inity*yy}px,0)`
	// 	})
	// }
//------------------------------------------------------
	var seechange = {
		el : [],
		mx : 0,
		my : 0,
		parentWidth : 0,
		parentHeight : 0,
		initx : [],
		inity : [],
		init(parentel,elgroup){
			this.parentMove(parentel);
			for(var i = 0;i < elgroup.length; i++){
				this.el.push(elgroup[i][0]);
				this.initx.push(elgroup[i][1]);
				this.inity.push(elgroup[i][2]);
			}
		},
		parentMove(parentel){
			parentel.mousemove(function(e){
				this.mx = e.clientX - parentel.offset().left;
				this.my = e.clientY - parentel.offset().top;
				this.parentWidth = parentel.width();
				this.parentHeight = parentel.height();
				var xx = this.mx-this.parentWidth/2;
				var yy = this.my-this.parentHeight/2;
				this.change(xx,yy);
			}.bind(this))
		},
		change(xx,yy){
			for(var i = 0;i <this.el.length;i++){
				this.el[i].css({
					transform: `translate3d(${-this.initx[i]*xx}px,${-this.inity[i]*yy}px,0)`
				})
			}
		}
	}
	seechange.init($(".banner"),[
		[$(".bg1"),.01,.01],
		[$(".bg2"),.02,.02],
		[$(".bg3"),.03,.03],
		[$(".bg4"),.04,.04],
		[$(".bg5"),.05,.05]
	]);
</script>
</body>
</html>